<script setup>
import { AttachAddon } from '@xterm/addon-attach';
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import '@xterm/xterm/css/xterm.css';
import { onMounted } from 'vue';

onMounted(() => {
    const terminal = new Terminal({
        convertEol: false,
        cursorBlink: true,
    });
    terminal.open(document.getElementById('terminal'));
    const fitAddon = new FitAddon();
    const socket = new WebSocket("ws://localhost:8899/ws");
    const attachAddon = new AttachAddon(socket);
    terminal.loadAddon(attachAddon);
    terminal.loadAddon(fitAddon);
    fitAddon.fit();
    window.addEventListener("resize", () => {
        try {
            fitAddon.fit()
        } catch { }
    })
    fitAddon.fit();
})
</script>
<template>
    <div id="terminal" class="w-full h-full"></div>
</template>